<template>
  <div class="zong">
    <!-- 销售记录盒子 -->
    <div style=" height: 80px">
      <span class="jianbian"
        style=" width: 100%; line-height: 50px; padding-left: 30px; font-size: 24px;">销售数据记录</span>
    </div>

    <div style=" width: 500px ;height: 300px; margin: 25px 25px;">
      <div style="display: flex; align-items: center; justify-content: space-around; width: 100%; height: 100px; ">
        <p style="  color: #00e4ff; font-weight: 700;  flex: 3; font-size: 24px; height: 100%;">
          昨日销售额(元)</p>
        <p style="color: #bafffc;  font-size: 70px; flex: 4;height: 70px; line-height: 50px; height: 100%; padding-left: 80px;"  class="ziti">{{Salesquota}}</p>
      </div>
      <div style="width: 100%; height: 260px;  display: flex; justify-content: space-around; align-items: center;">
        <div style="height: 150px; width: 200px;  margin-bottom: 100px;">
          <span style="color:#00e2fd; font-size: 20px; font-weight: 600; ">昨日订单数(笔)</span>
          <dv-border-box-8 class="ziti bian" :dur="5"
            style="  width: 100%; height: 100%;  text-align: center; line-height: 170px; margin-top: 10px; ">{{orders}}</dv-border-box-8>
        </div>
        <div style="height: 150px; width: 200px;  margin-bottom: 100px; ">
          <span style="color: #00e2fd; font-size: 20px; font-weight: 600;">昨日新增用户(人)</span>
          <dv-border-box-8 class="ziti bian" :dur="5" :reverse="true"
            style=" width: 100%; height: 100%; text-align: center; line-height: 170px; margin-top: 10px;">{{user}}</dv-border-box-8>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      Salesquota: '' || '6200.78', // 销售额度
      orders: '' || '142', // 订单数
      user: '' || '49' // 新增用户
    }
  },
  mounted() {
    // setInterval(() => {
    //   this.top1()
    // }, 43200000)
    this.top1()
  },
  methods: {
    randomNum(min, max) {
      const range = max - min
      const rand = Math.random()
      return (min + Math.round(rand * range))
    },
    top1() {
      // 销售额度
      // const i = this.randomNum(7000, 9000)
      const i = 7381
      // 人数
      // const z = this.randomNum(30, 50)
      const z = 32
      // 订单数
      // const s = this.randomNum(390, 462)
      const s = 404
      const si = `${i}.${z}`
      this.Salesquota = si
      this.orders = s
      this.user = z
    }
  }
}
</script>

<style lang="less" scoped>
// 自定义字体
@font-face {
  font-family: myFont;
  src: url('../../assets/郑庆科黄油体.TTF');
}

.ziti {
  font-family: myFont;
  font-size: 60px;
  color: #bafffc;

}

// .bian{
//    border: 2px solid #105a7d;
// }
.zong {
  margin: 0;
  padding: 0;
  width: 540px;
  height: 100%;

  background-image: url(../../assets/地图背景图/边框.png);
  background-size: 100% 100%;

  .order {
    display: flex;

    align-items: center;
    height: 8.333rem;
    background-color: yellowgreen;
    padding: 0 4.167rem;
  }
}

.gong {
  border: 1px solid #0f1d3f;
  height: 7.167rem;
  background-color: sandybrown;
  text-align: center;
  line-height: 7.167rem;
  font-size: 2.5rem;
  color: #bafdfd;
}

.jianbian {
  background: linear-gradient(to top, rgb(71, 242, 254) 0%, rgb(166, 253, 252) 70%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
</style>>
